<template>
	<a-modal footer="" :maskClosable="false" title="详情" :width="840" :visible="showModal"
		:confirm-loading="confirmLoading" :ok-type="'primary'" @ok="confirmOk" @cancel="cancel">
		<a-form :form="form">
			<section class="p-10 pl-24" style="background: #f0f0f0;">
			  基础信息
			</section>
			<section class="flex flex-wrap mt-10 pl-24">
			 <div class="mb-10" style="width: 50%;">渠道：{{details.channelName}}</div>
			 <div class="mb-10" style="width: 50%;">活动码：{{details.code}}</div>
			 <div  class="mb-10" style="width: 50%;">活动名称：{{details.name}}</div>
			  <div  class="mb-10" style="width: 50%;">是否启用：{{details.isEnabled?'是':'否'}}</div>
			  <div  class="mb-10" style="width: 100%;">下单时间范围：{{details.orderTimeStart}}-{{details.orderTimeEnd}}</div>
			  <div class="mb-10" style="width: 100%;">取车时间范围：{{details.pickupTimeStart}}-{{details.pickupTimeEnd}}</div>
			  <div v-if="details.returnTimeStart" class="mb-10" style="width: 100%;">还车时间范围：{{details.returnTimeStart}}-{{details.returnTimeEnd}}</div>
			</section>
			<section class="p-10 pl-24" style="background: #f0f0f0;">
			  优惠信息(仅限租车费)
			</section>
			<section class="flex flex-wrap mt-15 pl-24">
			 <div v-for="(item,index) in details.preferentialInfo" :key="index" class="p-15 flex flex-wrap mb-15" style="border: 1px solid #e8e8e8;width: 100%;">
				 <div class="mb-10" style="width: 50%;">最小租期：{{item.minDays}}天</div>
				 <div  class="mb-10" style="width: 50%;">优惠类型：{{item.couponType==4?'租免':item.couponType==2?'折扣':'立减'}}</div>
				  <div v-if="item.couponType==2" class="mb-10" style="width: 50%;">抵扣比例(%)：{{item.ratio*100}}%</div>
				  <div v-if="item.couponType==1" class="mb-10" style="width: 50%;">满足金额：{{item.minAmount}}元</div>
				  <div v-if="item.couponType==1||item.couponType==3" class="mb-10" style="width: 50%;">减免金额：{{item.amount}}元</div>
			 </div>
			</section>
			<section class="p-10 pl-24" style="background: #f0f0f0;">
			  关联服务商
			</section>
			<a-table  class="mt-16 pr-24" :columns="columns" :data-source="data" :scroll="scroll" :pagination="pagination">
				<template #name="val, data">
				{{data.vendorName}}
				</template>
				<template #phone="val, data">
			        {{data.contactName}}
				<a-divider
					type="vertical" />
					 {{data.contactPhone}}
					 <a-divider
					 	type="vertical" />
						 {{data.contactEmail}}
				</template>
				<template #operate="val, data">
				   <a
				     
				     href="javascript:;"
				     class="block" style="color: red;"
				     @click="getDelete(data)"
				     >删除</a
				   >
				</template>
				
				
			</a-table>
		<section class="p-10 pl-24" style="background: #f0f0f0;">
		  其他信息
		</section>
			<section class="flex flex-wrap mt-10 pl-24">
			 <div class="mb-10" style="width: 50%;">创建人：{{details.createByName}}</div>
			 <div class="mb-10" style="width: 50%;">创建时间：{{details.createTime}}</div>
			 <div  class="mb-10" style="width: 50%;">编辑人：{{details.updateByName}}</div>
			  <div  class="mb-10" style="width: 50%;">编辑时间：{{details.updateTime}}</div>
			  
			</section>
			
		</a-form>
	</a-modal>
</template>

<script>
	import {
		getActivityRelationVendor,getActivityUnbindVendor,getPageActivityDetail,getActivityBindVendor
	} from '@/api/operationInfo/channel'
	import moment from 'moment'
	import { tableMixins } from '@/utils/mixins'
	export default {
		mixins: [tableMixins],
		props: {
			id: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
			    loading: false,
				showModal:false,
				data:[],
				total:0,
				order:{},
				details:{},
				columns: [
					{
						title: '服务商',
						dataIndex: 'name',
						width: 100,
						scopedSlots: {
							customRender: 'name'
						},
						 align: 'center'
					},
					{
						title: '联系方式',
						width: 170,
						dataIndex: 'phone',
						scopedSlots: {
							customRender: 'phone'
						},
						 align: 'center'
					},
					{
						title: '操作',
						width: 120,
						dataIndex: 'operate',
						scopedSlots: {
							customRender: 'operate'
						},
						 align: 'center'
					},
				],
				rowsNum:5
				
			}
		},
		computed: {
			computed: {
				scroll() {
					return {x: this.data.length === 0 ? undefined : 1500}
				}
			},
			
		},
		methods: {
			getDetails() {
						
			  this.loading = true
			  getPageActivityDetail({id:this.order.id}).then(data => {
			    this.details = data
			 
			  }).catch(err => {
			  }).finally(() => this.loading = false)
			},
			getData() {
						  if(!this.name)this.name=undefined
			  this.loading = true
			  getActivityRelationVendor(this.getParams()).then(data => {
			    this.total = data.rowCount
			    this.data = data.items
			  }).catch(err => {
			  }).finally(() => this.loading = false)
			},
			getParams() {
			  return {
						pageNo: this.pageNum,
						pageSize: this.rowsNum,
						// name: this.name,
						activityId:this.order.id
			  }
			},
			getDelete(data){
				this.$confirm({
				  title: '提示',
				  content: `确定删除当前${data.vendorName}服务商吗？`,
				  okText: '确定',
				  okType: 'danger',
				  cancelText: '取消',
				  onOk: () => {
				    getActivityUnbindVendor({id:data.id}).then(() => {
											  
				      this.$message.success('删除成功！')
				    this.search()
				    })
				  },
				})
				
				 
				
			},
			search() {
			  this.pageNum = 1
			  this.getData()
			},
			
			
			cancel(){
				this.showModal = false
			},
			open(data){
				this.order=data
				this.showModal = true
				this.getData()
				this.getDetails()
			},
		},
	}
</script>

<style lang="less" scoped>
	/deep/.ant-modal-body{
		padding-left: 0;
		padding-right:0
		
	}
	.upload-list {
		/deep/ .ant-form-item-label {
			height: 30px;
			line-height: normal;
		}
	}
</style>